<template>
  <div class="wrapper">
    <div class="content">
      <div>
        <div class="tables">
          <el-table
            border
            height="350"
            tooltip
            :loading="loading"
            :data="data"
          >
            <el-table-column
              prop="name"
              label="专题名称"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="240"
              fixed="right"
            >
              <template slot-scope="{ row, $index }">
                <span>
                  <el-button
                    v-if="$index === index"
                    type="primary"
                    size="small"
                    @click="selectedPromotion(row, $index)"
                  >
                    已选
                  </el-button>
                  <el-button
                    v-if="$index !== index"
                    size="small"
                    @click="selectedPromotion(row, $index)"
                  >
                    选择
                  </el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            :page.sync="params.current"
            :total="Number(total)"
            :limit.sync="params.size"
            size="small"
            show-total
            show-elevator
            show-sizer
            @pagination="changesize"
          ></pagination>

          <!-- <el-page @on-change="
              (val) => {
                params.current = val;
              }
            " :current="params.current" :page-size="params.size" class="mt_10" :total="Number(totals)"
            size="small" show-elevator /> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHomeList } from '@/api/shop-base/other.js';
export default {
  data() {
    return {
      loading: true, //表格请求数据为true
      promotionList: '', // 活动列表
      selectedIndex: 0, //左侧菜单选择
      promotions: '', //选中的活动key
      index: 999, // 已选下标
      data: [],
      params: {
        sort: 'createTime',
        order: 'desc',
        pageClientType: 'H5',
        current: 1,
        size: 10,
        pageType: 'SPECIAL',
      },
      total: 0, // 表单数据总数
      columns: [
        {
          title: '专题名称',
          key: 'name',
          tooltip: true,
          // slot: 'name'
          //   width: 200,
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 100,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: this.index == params.index ? 'primary' : '',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.index = params.index;
                      params.row = {
                        ...params.row,
                        pageType: 'special',
                      };
                      this.$emit('selected', [params.row]);
                    },
                  },
                },
                this.index == params.index ? '已选' : '选择'
              ),
            ]);
          },
        },
      ],
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    // 选择活动
    selectedPromotion(val, index) {
      // this.index = index;
      // this.params = {
      //   ...val.row,
      //   pageType: 'special'
      // }
      // this.$emit("selected", [val.row]);

      console.log(val, index);
      val.___type = 'special';
      val.___promotion = this.promotions;
      this.$emit('selected', [val]);
      console.log([val]);
      this.index = index;
    },
    changesize(v) {
      // 改变页数
      this.params.page = v.page;
      this.params.size = v.limit;
      this.init();
    },
    // 获取话题的标题
    async init() {
      const res = await getHomeList(this.params);
      if (res.code === 0) {
        this.loading = false;
        this.data = res.data.records;
        this.total = res.data.total;
      } else {
        this.loading = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  max-width: 100% !important;
}

.search {
  width: 300px;
}

.page {
  margin-top: 2vh;
  text-align: right;
}

.time {
  font-size: 12px;
}

.tables {
  height: 400px;
  margin-top: 20px;
  overflow: auto;
  width: 100%;
}

::v-deep .ivu-table-wrapper {
  width: 100%;
}

.list {
  margin: 0 1.5%;
  height: 400px;
  overflow: auto;

  > .list-item {
    padding: 10px;
    transition: 0.35s;
    cursor: pointer;
  }

  .list-item:hover {
    background: #ededed;
  }
}

.list {
  flex: 1;
  width: auto;
}

.content {
  overflow: hidden;
  flex: 4;
}

.active {
  background: #ededed;
}

.wrapper {
  overflow: hidden;
}

.search-views {
  display: flex;

  > * {
    margin: 0 4px;
  }
}
</style>
